// 基础移动端定位样式
export const BASE_MOBILE_STYLE = {
  style: {
    width: 1600,
    height: 300,
    left: 0,
    top: 0,
    borderRadius: 3,
  },
  x: 1,
  y: 1,
  sizex: 6,
  sizey: 4,
  miniSizex: 1,
  miniSizey: 1,
  auxiliaryMatrix: true,
};

// 组件仪表板样式
export const COMMON_BACKGROUND_BASE = {
  backgroundColorSelect: true,
  color: "#FFFFFF",
  alpha: 100,
  borderRadius: 5,
  innerPadding: 0,
};

// 组件仪表板样式
export const COMMON_BACKGROUND = {
  ...COMMON_BACKGROUND_BASE,
  enable: false,
  backgroundType: "innerImage",
  innerImage: "board/blue_1.svg",
  innerImageColor: "#1094E5",
  outerImage: null,
};

// 空组件仪表板样式
export const COMMON_BACKGROUND_NONE = {
  enable: false,
  backgroundColorSelect: false,
  backgroundType: "innerImage",
  color: "#FFFFFF",
  innerImage: "board/blue_1.svg",
  innerImageColor: "#1094E5",
  outerImage: null,
  alpha: 100,
  borderRadius: 0,
  innerPadding: 0,
};

// 公共样式
export const commonStyle = {
  rotate: 0,
  opacity: 1,
  borderStyle: "solid",
  borderWidth: 0,
  borderRadius: 0,
};

export const PIC_STYLE = {
  ...commonStyle,
  adaptation: "adaptation",
};

export const commonAttr = {
  animations: [],
  events: {},
  groupStyle: {}, // 当一个组件成为 Group 的子组件时使用
  isLock: false, // 是否锁定组件
};

// 超链接配置
export const HYPERLINKS = {
  openMode: "_blank",
  enable: false,
  content: "http://",
};

// 视频信息配置
export const VIDEOLINKS = {
  videoType: "web",
  web: {
    autoplay: true,
    height: 300,
    muted: true,
    loop: true,
    controlBar: {
      timeDivider: false,
      durationDisplay: false,
      remainingTimeDisplay: false,
      currentTimeDisplay: false, // 当前时间
      volumeControl: false, // 声音控制键
      fullscreenToggle: false,
      pause: false,
    },
    sources: [{}],
  },
  rtmp: {
    sources: [
      {
        type: "rtmp/mp4",
      },
    ],
    height: 300,
    techOrder: ["flash"],
    autoplay: false,
    controls: true,
    flash: {
      hls: {
        withCredentials: false,
      },
    },
  },
};

// 流媒体视频信息配置
export const STREAMMEDIALINKS = {
  videoType: "flv",
  flv: {
    type: "flv",
    isLive: false,
    cors: true, // 允许跨域
    loop: true,
    autoplay: false,
    // url: null // 网络动画视频
  },
};

// 嵌套页面信息
export const FRAMELINKS = {
  src: "",
};

export const assistList = [
  {
    id: "10001",
    component: "v-text",
    type: "v-text",
    label: "文字",
    icon: "iconfont icon-text",
    defaultClass: "text-filter",
  },
  {
    id: "10002",
    component: "de-rich-text",
    type: "de-rich-text",
    label: "富文本",
    icon: "iconfont icon-fuwenbenkuang",
    defaultClass: "text-filter",
  },
  {
    id: "10004",
    component: "rect-shape",
    type: "rect-shape",
    label: "矩形",
    icon: "iconfont icon-juxing1",
    defaultClass: "text-filter",
  },
  {
    id: "10006",
    component: "de-tabs",
    type: "de-tabs",
    label: "选项卡",
    icon: "iconfont icon-tabs",
    defaultClass: "text-filter",
  },
];

export const pictureList = [
  {
    id: "20001",
    component: "Picture",
    type: "picture-add",
    label: "图片",
    icon: "iconfont icon-picture",
    defaultClass: "text-filter",
  },
  {
    id: "20002",
    component: "video",
    type: "video",
    label: "视频",
    icon: "iconfont icon-video",
    defaultClass: "text-filter",
  },
  {
    id: "20003",
    component: "stream-media",
    type: "stream-media",
    label: "流媒体",
    icon: "iconfont icon-a-liumeitimeitiliebiao",
    defaultClass: "text-filter",
  },
];

export const tabUseList = [
  {
    id: "20002",
    component: "video",
    type: "video",
    label: "视频",
    icon: "iconfont icon-video",
    defaultClass: "text-filter",
  },
  {
    id: "20003",
    component: "stream-media",
    type: "stream-media",
    label: "流媒体",
    icon: "iconfont icon-a-liumeitimeitiliebiao",
    defaultClass: "text-filter",
  },
  {
    id: "30002",
    component: "de-frame",
    type: "de-frame",
    label: "网页",
    icon: "iconfont icon-iframe",
    defaultClass: "text-filter",
  },
];

export const otherList = [
  {
    id: "30001",
    component: "de-show-date",
    type: "de-show-date",
    label: "时间",
    icon: "iconfont icon-shijian",
    defaultClass: "text-filter",
  },
  {
    id: "30002",
    component: "de-frame",
    type: "de-frame",
    label: "网页",
    icon: "iconfont icon-iframe",
    defaultClass: "text-filter",
  },
];

export const USER_VIEW = {
  id: "10005",
  component: "user-view",
  label: "用户视图",
  propValue: "",
  icon: "juxing",
  type: "view",
  mobileStyle: BASE_MOBILE_STYLE,
  hyperlinks: HYPERLINKS,
  style: {
    width: 300,
    height: 200,
  },
  x: 1,
  y: 108,
  sizex: 12,
  sizey: 6,
  auxiliaryMatrix: true,
  miniSizex: 1,
  miniSizey: 1,
};

// 编辑器左侧组件列表
const list = [
  {
    id: "10001",
    component: "v-text",
    label: "文字",
    propValue: "双击输入文字",
    icon: "wenben",
    type: "v-text",
    mobileStyle: BASE_MOBILE_STYLE,
    hyperlinks: HYPERLINKS,
    style: {
      width: 400,
      height: 100,
      fontSize: 22,
      fontWeight: 400,
      lineHeight: "",
      letterSpacing: 0,
      textAlign: "center",
      color: "#000000",
      verticalAlign: "middle",
    },
    x: 1,
    y: 1,
    sizex: 10,
    sizey: 2,
    miniSizex: 1,
    miniSizey: 1,
  },
  {
    id: "10002",
    component: "de-rich-text",
    label: "富文本",
    propValue: "双击进入编辑状态",
    icon: "icon-fuwenbenkuang",
    type: "de-rich-text",
    mobileStyle: BASE_MOBILE_STYLE,
    hyperlinks: HYPERLINKS,
    style: {
      width: 400,
      height: 100,
    },
    x: 1,
    y: 1,
    sizex: 10,
    sizey: 2,
    miniSizex: 1,
    miniSizey: 1,
  },
  {
    id: "10003",
    component: "Picture",
    label: "图片",
    icon: "tupian",
    type: "Picture",
    propValue: {},
    mobileStyle: BASE_MOBILE_STYLE,
    hyperlinks: HYPERLINKS,
    style: {
      width: 300,
      height: 200,
    },
    x: 1,
    y: 1,
    sizex: 10,
    sizey: 6,
    miniSizex: 1,
    miniSizey: 1,
  },
  {
    id: "10003-1",
    component: "Picture",
    label: "背景-科技1",
    icon: "tupian",
    type: "Picture",
    propValue: {},
    mobileStyle: BASE_MOBILE_STYLE,
    hyperlinks: HYPERLINKS,
    style: {
      borderStyle: "solid",
      borderWidth: 0,
      width: 600,
      height: 300,
      borderRadius: "",
    },
    miniSizex: 1,
    miniSizey: 1,
  },
  {
    id: "10004",
    component: "rect-shape",
    label: "矩形",
    propValue: "",
    icon: "juxing",
    type: "rect-shape",
    mobileStyle: BASE_MOBILE_STYLE,
    hyperlinks: HYPERLINKS,
    style: {
      width: 300,
      height: 200,
      borderStyle: "solid",
      borderWidth: 0,
      borderColor: "#000000",
    },
    x: 1,
    y: 1,
    sizex: 10,
    sizey: 6,
    miniSizex: 1,
    miniSizey: 1,
  },
  USER_VIEW,
  {
    id: "10006",
    component: "de-tabs",
    label: "选项卡",
    propValue: "",
    icon: "tabs",
    type: "de-tabs",
    mobileStyle: BASE_MOBILE_STYLE,
    hyperlinks: HYPERLINKS,
    style: {
      width: 200,
      height: 200,
      borderStyle: "solid",
      borderWidth: 0,
      borderColor: "#000000",
      fontSize: 16,
      activeFontSize: 18,
      carouselEnable: false,
      switchTime: 5,
    },
    options: {
      tabList: [
        {
          title: "Tab1",
          name: "1",
          content: { type: "canvas" },
        },
      ],
    },
    x: 1,
    y: 1,
    sizex: 12,
    sizey: 10,
    miniSizex: 1,
    miniSizey: 1,
  },
  {
    id: "30001",
    component: "de-show-date",
    label: "时间",
    propValue: "",
    icon: "shijian",
    type: "de-show-date",
    mobileStyle: BASE_MOBILE_STYLE,
    hyperlinks: HYPERLINKS,
    style: {
      width: 250,
      height: 100,
      fontSize: 22,
      fontWeight: 400,
      lineHeight: "",
      letterSpacing: 0,
      textAlign: "center",
      color: "#000000",
      verticalAlign: "middle",
      borderStyle: "solid",
      borderColor: "#000000",
      time_margin: 0,
    },
    formatInfo: {
      openMode: "0",
      showWeek: false,
      showDate: true,
      dateFormat: "yyyy-MM-dd",
      timeFormat: "hh:mm:ss",
    },
    x: 1,
    y: 1,
    sizex: 10,
    sizey: 2,
    miniSizex: 1,
    miniSizey: 1,
  },
  {
    id: "30002",
    component: "de-frame",
    type: "de-frame",
    label: "",
    icon: "iconfont icon-iframe",
    defaultClass: "text-filter",
    mobileStyle: BASE_MOBILE_STYLE,
    hyperlinks: HYPERLINKS,
    style: {
      width: 400,
      height: 200,
    },
    frameLinks: FRAMELINKS,
    x: 1,
    y: 1,
    sizex: 10,
    sizey: 5,
    miniSizex: 1,
    miniSizey: 1,
  },
  {
    id: "20001",
    component: "Picture",
    type: "picture-add",
    label: "图片",
    icon: "iconfont icon-picture",
    defaultClass: "text-filter",
    mobileStyle: BASE_MOBILE_STYLE,
    hyperlinks: HYPERLINKS,
    style: {
      width: 400,
      height: 200,
      adaptation: "adaptation",
    },
    x: 1,
    y: 1,
    sizex: 10,
    sizey: 5,
    miniSizex: 1,
    miniSizey: 1,
  },
  {
    id: "20002",
    component: "de-video",
    type: "de-video",
    label: "",
    icon: "iconfont icon-picture",
    defaultClass: "text-filter",
    mobileStyle: BASE_MOBILE_STYLE,
    hyperlinks: HYPERLINKS,
    style: {
      width: 400,
      height: 200,
    },
    videoLinks: VIDEOLINKS,
    x: 1,
    y: 1,
    sizex: 10,
    sizey: 5,
    miniSizex: 1,
    miniSizey: 1,
  },
  {
    id: "20003",
    component: "de-stream-media",
    type: "de-stream-media",
    label: "",
    icon: "iconfont icon-picture",
    defaultClass: "text-filter",
    mobileStyle: BASE_MOBILE_STYLE,
    hyperlinks: HYPERLINKS,
    style: {
      width: 400,
      height: 200,
    },
    streamMediaLinks: STREAMMEDIALINKS,
    x: 1,
    y: 1,
    sizex: 10,
    sizey: 5,
    miniSizex: 1,
    miniSizey: 1,
  },
];

for (let i = 0, len = list.length; i < len; i++) {
  const item = list[i];
  item.style = { ...commonStyle, ...item.style };
  list[i] = { ...commonAttr, ...item };
}

export default list;
